<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    custom-class="page-dialog address-dialog"
  >
    <el-form
      ref="addressForm"
      :rules="rules"
      :model="form"
      label-position="right"
      label-width="80px"
      class="page-form"
      style="width: 100%;"
    >
      <el-form-item label="收货人" prop="name">
        <el-input v-model="form.name" clearable :readonly="isDetail" />
      </el-form-item>
     <!--  <el-form-item label="会员昵称" prop="nickName">
        <el-input v-model="form.nickName" placeholder="请输入会员昵称" clearable :readonly="!isAdd" />
      </el-form-item> -->
      <el-form-item label="省市地址" clearable :readonly="isDetail">
        <v-distpicker
          :province="form.province"
          :city="form.city"
          :area="form.district"
          @selected="onSelected"
        ></v-distpicker>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入详细地址" clearable :readonly="isDetail" />
      </el-form-item>
      <el-form-item label="邮政编号" prop="zipCode">
        <el-input v-model="form.zipCode" placeholder="请输入邮政编号" clearable :readonly="isDetail" />
      </el-form-item>

      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号码" clearable :readonly="isDetail" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <template v-if="isDetail">
        <el-button type="primary" @click="dialogVisible=false">关闭</el-button>
      </template>
      <template v-else-if="isAdd">
        <el-button @click="restForm()">取消</el-button>
        <el-button type="primary" @click="submitAddForm()">保存</el-button>
      </template>
      <template v-else-if="isUpdate">
        <el-button @click="restForm()">取消</el-button>
        <el-button type="primary" @click="submitUpdateForm()">修改</el-button>
      </template>
    </div>
  </el-dialog>
</template>

<script>
import addressApi from "@/api/system/address-api";
import VDistpicker from "v-distpicker"; /* 省市区三级联动地址插件 */

export default {
  name: "Address",
  components: { VDistpicker },
  props: {
    /* detail: 详细页面，add: 添加页面，update：编辑页面 */
    isDetail: {
      type: Boolean,
      default: false
    },
    isAdd: {
      type: Boolean,
      default: false
    },
    isUpdate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogTitle: null,
      form: {
        id: null,
        name: null,
        memberId: null,
        nickName: null,
        province: "安徽省",
        city: "合肥市",
        district: "包河区",
        address: null,
        zipCode: null,
        phone: null
      },
      
      updateId: null,
      treeSelectData: null,
      /* 表单验证规则 */
      rules: {
        name: [
          { required: true, message: "请输入会员昵称", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "change"
          },
          {
            validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) === false && value != null) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "change"
          },  
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
          { min: 5, message: "长度至少5个字符", trigger: "blur" }
        ]
      }
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handle(id) {
      if (this.isDetail) {
        this.rules = null;
        /*  设置对话框的标题 */
        this.dialogTitle = "收货地址详情";
        this.getAddressDetail(id);
      } else if (this.isAdd) {
        this.form.memberId = id;
        this.dialogTitle = "新增收货地址";
      } else if (this.isUpdate) {
        this.dialogTitle = "修改收货地址";
        this.updateId = id;
        this.getAddressDetail(id);
      }
      this.dialogVisible = true;
    },
    submitAddForm() {
      this.$refs.addressForm.validate(valid => {
        if (valid) {
          console.log("提交表单成功！");
          this.addAddress();
          // this.$emit("getList")
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitUpdateForm() {
      this.$refs.addressForm.validate(valid => {
        if (valid) {
          console.log("提交表单成功！");
          this.updateAddress();
          // this.$emit("getList")
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getAddressDetail(id) {
      addressApi.detail(id).then(response => {
        if (response.code === 200) {
          console.log(response.data);
          this.form = response.data;
        }
      });
    },
    /* 获取地址联动值 */
    onSelected(data) {
      console.log(data);
      this.form.province = data.province.value;
      this.form.city = data.city.value;
      this.form.district = data.area.value;
    },

    /* 添加收货地址*/
    addAddress() {
      console.log(this.form);
      const addParam = {
        name: this.form.name,
        memberId: this.form.memberId,
        province: this.form.province,
        city: this.form.city,
        district: this.form.district,
        address: this.form.address,
        zipCode: this.form.zipCode,
        phone: this.form.phone
      };
      addressApi.add(addParam).then(response => {
        console.log(addParam);
        if (response.code === 200) {
          this.restForm();
          this.$message({
            message: "添加收货地址成功",
            type: "success"
          });
          this.$emit("change");
        }
      });
    },
    /* 修改收货地址信息 */
    updateAddress() {
      const updateParam = {
        id: this.updateId,
        name: this.form.name,
        nickName: this.form.nickName,
        province: this.form.province,
        city: this.form.city,
        district: this.form.district,
        address: this.form.address,
        zipCode: this.form.zipCode,
        phone: this.form.phone
      };
      addressApi.update(updateParam).then(response => {
        console.log(updateParam);
        if (response.code === 200) {
          this.restForm();
          this.$message({
            message: "修改收货地址成功",
            type: "success"
          });
          this.$emit("change");
        }
      });
    },
    /* 重置表单 */
    restForm() {
      this.$refs.addressForm.resetFields();
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss">
.address-dialog {
  margin-top: 40px !important;
}
</style>

<style lang="scss" scoped>
</style>
